<template>
	<div class="u-page" style="background-color: #f3f7f9">
		<div style="text-align: center;">
			<u-tabs :list="TabsArr" :current="current" gutter="80" font-size="32" @change="change"
				:active-item-style="activeStyle" :bar-style="barStyle"></u-tabs>
			<div class="u-border-top" v-if="current==0">
				<!-- <u-notice-bar mode="horizontal" :list="tips" padding="13rpx 18rpx"></u-notice-bar> -->
				<div class="box" v-if="ObtainBalance.length>0">
					<div class="u-title u-flex u-row-between u-col-center u-mb-5 border-bottom" style="height: 150rpx;"
						v-for="(item, index) in ObtainBalance">
						<div class="u-col-center job-name"  @click="showTips(item.reason)">
							<div class="reason">
								{{item.reason}}
							</div>
							<div class="integral-date">
								{{item.createtime}}
							</div>
						</div>
						<div class="u-fz-20" style="color: #ea4d5e;">
							<p>+ {{item.coin}}</p>
						</div>
					</div>
				</div>
				<div class="box u-center" v-else>
					暂无数据
				</div>
			</div>
			<div class="u-border-top" v-if="current==1">
				<div class="box" v-if="UsedBalance.length>0">
					<div class="u-title u-flex u-row-between u-col-center u-mb-5 border-bottom" style="height: 150rpx;"
						v-for="(item, index) in UsedBalance">
						<div class="u-col-center job-name">
							<div class="reason">
								{{item.reason}}
							</div>
							<div class="integral-date">
								{{item.createtime}}
							</div>
						</div>
						<div class="u-fz-20 u-cl-error">
							<p style="color: #4dc822">- {{item.coin}}</p>
						</div>
					</div>
				</div>
				<div class="box u-center" v-else>
					暂无数据
				</div>
			</div>
		</div>
		
		<!-- 点击问号弹出提示窗 -->
		<u-modal v-model="TipsShow" :content="TipsContent" :mask-close-able="true" confirm-color="#eb5468" ></u-modal>
		
	</div>
</template>

<script>
	import globalData from "@/globalData";

	export default {

		data() {
			return {
				TabsArr: [{
						name: '收入明细',
					},
					{
						name: '提现记录'
					}
				],
				current: 0,
				pageNum_0: 1,
				pageSize_0: 10,
				ObtainBalance: [],
				pageNum_1: 1,
				pageSize_1: 10,
				UsedBalance: [],
				tips: [],
				userInfo: {},
				activeStyle: {
					color: "#303133"
				},
				barStyle: {
					backgroundColor: "#eb5468"
				},
				TipsShow: false,
				TipsContent: '',
			}
		},

		mounted() {

		},

		onReady() {},

		onPullDownRefresh() {

			// 停止Loading
			uni.stopPullDownRefresh();
		},

		onReachBottom() {
			if (this.current == 0) {
				this.pageNum_0 += 1
				this.initAddBalanceData()
			} else if (this.current == 1) {
				this.pageNum_1 += 1
				this.initSubBalanceData()
			}
		},

		onLoad(option) {
			//未登录跳转到登录页面
			this.checkLogin();
			this.userInfo = uni.getStorageSync('userInfo')
			this.initAddBalanceData()
			this.initSubBalanceData()
		},

		methods: {

			/**
			 * 获取增加余额记录数据
			 */
			async initAddBalanceData() {
				let res = await this.$u.api.unifyMiniRest({
					systemid: "payment",
					url: "/points/token",
					userId: this.userInfo.userId,
					loading: false
				});
				if (res.code == 200 && this.isNotNull(res.data)) {
					let token = res.data
					let tmpToken = this.sault_md5_token(token)
					let result = await this.$u.api.unifyMiniRest({
						systemid: "payment",
						url: '/wallet/add/list',
						userId: this.userInfo.userId,
						pageNum: this.pageNum_0,
						pageSize: this.pageSize_0,
						token: token,
						authStr: tmpToken,
						loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						this.tips[0] = "您已累计转入¥" + result.TotalSum
						if (this.pageNum_0 != 1) {
							this.ObtainBalance = this.ObtainBalance.concat(result.rows)
						} else {
							this.ObtainBalance = result.rows
						}
					}
				} else {
					this.showMSG('none', '获取token出错啦')
				}
			},

			/**
			 * 获取减少余额记录数据
			 */
			async initSubBalanceData() {
				let res = await this.$u.api.unifyMiniRest({
					systemid: "payment",
					url: "/points/token",
					userId: this.userInfo.userId,
					loading: false
				});
				if (res.code == 200 && this.isNotNull(res.data)) {
					let token = res.data
					let tmpToken = this.sault_md5_token(token)
					let result = await this.$u.api.unifyMiniRest({
						systemid: "payment",
						url: '/wallet/sub/list',
						userId: this.userInfo.userId,
						pageNum: this.pageNum_1,
						pageSize: this.pageSize_1,
						token: token,
						authStr: tmpToken,
						loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
					});
					if (result.code == 200) {
						if (this.pageNum_1 != 1) {
							this.UsedBalance = this.UsedBalance.concat(result.rows)
						} else {
							this.UsedBalance = result.rows
						}
					}
				} else {
					this.showMSG('none', '获取token出错啦')
				}
			},

			/**
			 * 切换tab
			 */
			change(index) {
				this.current = index
			},
			
			/**
			 * 点击提示
			 */
			showTips(reason){
				this.TipsContent = reason;
				this.TipsShow = true;
			},
			
		}

	};
</script>

<style lang="scss" scoped>
	.section {
		background-color: #e5e5e5;
		width: 100%;
		overflow: hidden;
	}

	.box {
		width: 100%;
		padding-left: 4%;
		padding-right: 4%;
		position: relative;
		background-color: #ffffff;
		margin-bottom: 3rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.box-hasdata {
		width: 100%;
		padding-left: 4%;
		padding-right: 4%;
		position: relative;
		background-color: #ffffff;
		margin-bottom: 3rpx;
		padding-top: 20rpx;
	}

	.content {
		width: 620rpx;
		height: 50rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.notification-content {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		// padding-bottom: 20rpx;
		// border-bottom: 1rpx #e5e5e5 solid;
	}

	.messType {
		padding-left: 5rpx;
		color: #2979ff;
		font-weight: bold;
	}

	.float-left {
		float: left;
	}

	.float-right {
		float: right;
	}

	.color_gray {
		color: #b2b3b5;
	}

	.color-blue {
		color: #1989fa;
	}

	.detail {
		color: #1989fa;
		font-size: 30rpx;
		font-weight: bold;
	}

	.border-bottom {
		border-bottom: 1rpx #e5e5e5 solid;
	}


	.integral-title {
		font-size: 55rpx;
		font-weight: bold;
	}

	.height100 {
		height: 100rpx;
	}

	.seemore {
		height: 70rpx;
		color: #c5c1c1;
	}

	.integral-date {
		color: #bcbcbc;
		font-size: 30rpx;
		font-weight: 500;
		padding-top: 10rpx;
		font-weight: normal;
	}

	.slot-content {
		font-size: 28rpx;
		color: $u-content-color;
		text-align: center;
	}

	.topbar {
		font-size: 30rpx;
		font-weight: bold;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1rpx #e5e5e5 solid;
		padding-left: 30rpx;
		padding-right: 30rpx;
		background-color: white;
	}

	.top-title {
		width: 100%;
		text-align: center;
	}

	// 优惠券样式
	.see-coupon {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.coupon-title {
		font-size: 14px;
		padding: 10px 0;
	}

	.coupon {
		color: #e64340;
		box-sizing: border-box;
		position: relative;
		margin: 10px 0;
		width: 340rpx;
		height: 100px;
		border: 1px solid #e64340;
		border-radius: 10px;
	}

	.coupon.received {
		color: rgba(230, 67, 64, 0.7);
		border-color: rgba(230, 67, 64, 0.7);
	}

	.coupon {
		font-size: 12px;
		line-height: 1;
	}

	.coupon view {
		position: absolute;
		top: 14px;
		right: 32rpx;
		width: 128rpx;
	}

	.coupon-off {
		font-weight: bold;
		font-size: 20px;
		position: absolute;
		top: 22px;
		left: 40rpx;
	}

	.coupon-type {
		float: left;
		color: #fff;
		background-color: #e64340;
		height: 14px;
		line-height: 14px;
		padding-right: 2px;
		margin-left: 5px;
		margin-bottom: 12px;
	}

	.coupon-type::before {
		position: absolute;
		top: 0;
		left: 0;
		content: '.';
		color: transparent;
		background-color: transparent;
		width: 0;
		height: 0;
		border-top: 7.5px solid transparent;
		border-right: 6px solid #e64340;
		border-bottom: 7.5px solid transparent;
	}

	.coupon-limit {
		float: left;
	}

	.coupon-merchant {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 10px 30rpx;
		color: #fff;
		background-color: #e64340;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.coupon.received .coupon-merchant {
		background-color: rgba(230, 67, 64, 0.7);
	}

	.coupon.received .coupon-type {
		background-color: rgba(230, 67, 64, 0.7);
	}

	.coupon.received .coupon-type::before {
		border-right: 6px solid rgba(230, 67, 64, 0.7);
	}

	.coupon-received {
		position: absolute;
		top: 18px;
		right: 10rpx;
	}

	.content-wrap {
		width: 700rpx;
		margin: 0 auto;
	}

	.job-name {
		width: 65%;
		text-align: left;
	}

	.reason {
		font-weight: normal;
		font-size: 32rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
